<template>
  <div class="avatar-container">
    <img class="avatar-img" :src="url" :style="{
      width: size + 'px',
      height: size + 'px'
    }" />
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String, //url属性必须是一个字符串
      require: true,  //属性必传
    },
    size: {
      type: Number,
      require: true,
      default: 150,
    },

  }
}
</script>

<style scoped lang="less">
.avatar-container {
  width: 100%;
  .avatar-img {
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
  }
}
</style>